<template>
  <div class="address">
    <div class="title">
      <svg @click="$router.back()" t="1671798247143" class="icon" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="2281" width="200" height="200">
        <path d="M319.64 512.016l336.016-336.008 45.248 45.248L364.896 557.28z" p-id="2282"></path>
        <path d="M365.216 466.464l339.976 339.968-45.256 45.256-339.976-339.976z" p-id="2283"></path>
      </svg>
      <span>我的地址</span>
      <span></span>
    </div>
    <div class="address-content">
      <ul class="list" v-if="list.length > 0" @click="actionAddressId = 0">
        <li v-for="item in list" :key="item.addressId" @click="changeMyAddress(item)" @touchstart="getTouchStart(item)"
          @touchend="getTouchEnd">
          <div class="action-mark" v-if="actionAddressId == item.addressId">
            <button @click.stop="editAddress(item)">编辑</button>
            <button @click.stop="delAddress(item)">删除</button>
          </div>
          <div class="person">
            <span>{{ item.memberName }}</span>
            <span>{{ item.telMobile }}</span>
            <span v-if="item.isDefault" class="default">默认</span>
          </div>
          <div class="my-address">
            <span>{{ item.addressAll }}</span>
            <span>{{ item.detailAddress }}</span>
          </div>
        </li>
      </ul>

      <div class="empty" v-else>
        <img src="https://image-mall.gxptkc.com/m/resources/empty_address.png" alt="" />
        <p>还没有收获地址哦~</p>
      </div>
    </div>

    <div class="new-create">
      <div class="submit" @click="
        $router.push({
          path: '/address',
          query: {
            productId: $route.query.productId,
            source: $route.query.source,
            cartIds: $route.query.cartIds,
            type: 'add',
          },
        })
      ">
        新建收获地址
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import qs from "qs";
import { Toast } from "vant";
export default {
  beforeRouteEnter(to, from, next) {
    to;
    next((vm) => {
      // 通过 `vm` 访问组件实例
      vm.from = from.path;
    });
  },

  methods: {
    ...mapMutations(["changeAddress"]),

    changeMyAddress(item) {
      // console.log(11);
      if (this.from == "/confirm") {
        this.changeAddress(item);
        this.$router.push({
          path: "/confirm",
          query: {
            productId: this.$route.query.productId,
            source: this.$route.query.source,
            cartIds: this.$route.query.cartIds,
          },
        });
      }
    },

    getTouchStart(item) {
      clearTimeout(this.id);
      this.id = setTimeout(() => {
        console.log("长按");
        this.actionAddressId = item.addressId;
      }, 500);
    },
    getTouchEnd() {
      clearTimeout(this.id);
    },

    async delAddress(item) {
      // console.log(item);
      let res = await this.axios({
        url: `https://m-mall.gxptkc.com/v3/member/front/memberAddress/del`,
        method: "POST",
        headers: {
          authorization: `Bearer ${this.token}`,
          "content-type": "application/x-www-form-urlencoded",
        },
        data: qs.stringify({
          addressIds: item.addressId,
        }),
      });
      // console.log(res);
      Toast(res.data.msg);
      this.requestAddress();
    },

    async requestAddress() {
      let res = await this.axios({
        method: "GET",
        url: "https://m-mall.gxptkc.com/v3/member/front/memberAddress/list",
        headers: {
          authorization: "Bearer " + this.token,
        },
      });
      this.list = res.data.data.list;
    },

    editAddress(item) {
      console.log(item);
      this.$router.push({
        path: "/address",
        query: { type: "edit", addressId: item.addressId },
      });
    },
  },
  data() {
    return {
      token: null,
      list: [],
      from: "",
      actionAddressId: "",
    };
  },
  async created() {
    this.token = localStorage.getItem("fastCar-token");

    this.requestAddress();
  },
};
</script>

<style lang="scss" scoped>
.address {
  background-color: rgb(245, 245, 245);
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .title {
    display: flex;
    justify-content: space-between;
    padding: 10rem;
    background-color: #fff;
    height: 45rem;

    svg {
      width: 25rem;
      height: 25rem;
    }

    span {
      font-size: 16rem;
      color: #000;
      font-weight: bold;
    }
  }

  .address-content {
    height: calc(100vh - 120rem);
    background-color: #fff;

    ul.list {
      height: 100%;
      padding: 0 10rem;
      overflow: auto;
      flex-grow: 1;

      li {
        padding: 15rem 0;
        border-bottom: 1px solid #eee;
        position: relative;

        .action-mark {
          width: 100vw;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.7);
          position: absolute;
          left: -10rem;
          top: 0;
          display: flex;
          justify-content: center;
          align-items: center;

          button {
            padding: 10rem 30rem;
            background: linear-gradient(-90deg, #fe9820, #ffb72b);
            border: none;
            color: #fff;
            font-size: 17rem;
            border-radius: 20rem;

            &:last-child {
              background: linear-gradient(-90deg, #fc1d1c, #ff7a18);
              margin-left: 40rem;
            }
          }
        }

        .person {
          margin-bottom: 5rem;

          span {
            font-size: 15rem;
            color: #333;
            margin-right: 20rem;
            font-weight: bold;

            &.default {
              background-color: #fc1c1c;
              padding: 2rem 3rem;
              border-radius: 5rem;
              color: #fff;
              font-weight: normal;
              font-size: 13rem;
            }
          }
        }

        .my-address {
          span {
            font-size: 13rem;
            color: #000;
            margin-right: 20rem;
          }
        }
      }
    }

    .empty {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      img {
        width: 105px;
        margin-top: 40rem;
      }

      p {
        color: #999;
        font-size: 13rem;
        margin-top: 20rem;
      }
    }
  }

  .new-create {
    background-color: #fff;
    height: 60rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .submit {
      // margin: 30rem auto;
      width: 90vw;
      height: 45rem;
      color: #fff;
      background-color: #fc1c1c;
      border-radius: 25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16rem;
    }
  }
}
</style>